<template>
    <div style="overflow:hidden;">
        <cu-navbar>
            <block slot="content">订单</block>
        </cu-navbar>
        <div class="tabs2">
            <div class="tab2-item" v-for="item in  tabsList2">
                <div>{{ item.name }}</div>
                <div>{{ item.value }}</div>
            </div>
        </div>
        <view class="page order-page">
            <div class="filter-text" @click="show = true">筛选</div>
            <div class="order-list">
                <div class="order-item" v-for="(item,index) in orderListShow" :key="item.order_sn">
                    <div class="order-header f-r a-c j-b">
                        <div class="order-num">订单编号：{{ item.order_sn }}</div>
                        <div class="order-status" v-if="item.op_status == 15">
                            <div class="text" >封存中</div>
                        </div>
                        <div class="order-status" v-else>
                            <div v-if="item.status == 0" class="text" >待付款</div>
                            <div v-if="item.status == 1" class="text">待收款</div>
                            <div v-if="item.status == 2" class="text">
                                <span v-if="item.op_status == 10">拆分中</span>
                                <span v-else-if="item.op_status == 2">可委卖</span>
                                <span v-else-if="item.op_status == 11">拆分拒绝</span>
                                <span v-else-if="item.op_status == 12">拆分成功</span>
                                <span v-else-if="item.op_status == 13">提货成功</span>
                                <span v-else>已完成</span>
                            </div>
                        </div>
                    </div>
                    <div class="order-content">
                        <div >
                            <div class="f-r a-c j-b">
                                <div class="order-name">{{ item.pname }}</div>
                                <div class="order-date">{{ item.statusName }}</div>
                            </div>
                            <div class="order-date">
                                <span>买家姓名：</span>
                                <span>{{ item.mainame }}</span>
                            </div>
                            <div class="order-date">
                                <span>卖家姓名：</span>
                                <span>{{ item.sellname }}</span>
                            </div>
                            <div class="order-date">{{ $common.timeToDate(item.create_time * 1000, true) }}</div>
                            <div class="order-price order-price1">
                                <span>金额：</span>
                                <span class="order-price1">￥{{ item.total }}</span>
                            </div>
                        </div>
                    </div>
                    <div v-if="item.status == 0" class="button-list f-r a-c j-e">
                      <div  class="button" @click="openzhuandan(item)">转单</div>
                    </div>
                </div>
            </div>
            <u-empty
                v-if="!orderListShow.length"
                mode="order"
            />
            <footer-page
                :page="page"
                :pagesize="pagesize"
                :page-size="pageSize"
                :page-total="pageTotal"
                @pre="pagePre"
                @next="pageNext"
            ></footer-page>
        </view>
        <u-popup v-model="show" mode="bottom"  @close="close"  border-radius="14" closeable>
            <div class="popup-content">
                <u-form labelPosition="top" labelWidth="160rpx"  ref="form1">
                    <u-form-item label="订单状态" prop="userInfo.bank_username" borderBottom ref="item1">
                        <div class="tab-btn-list">
                            <div
                                @click="changeTab(item)"
                                v-for="item in tabsList" :key="item.id" :class="['tab-btn', type === item.value ? 'active' : '']">
                                {{ item.name}}
                            </div>
                        </div>
                    </u-form-item>
                    <u-form-item label="选择时间" prop="userInfo.bank_username" borderBottom ref="item1">
                        <div class="date-box" @click="show2 = true">
                            <span v-show="addtime">{{ addtime }}</span>
                            <span v-show="!addtime" style="color: rgb(192, 196, 204);">请选择时间</span>
                        </div>
                    </u-form-item>
                    <u-form-item label="姓名" prop="userInfo.bank_username" borderBottom ref="item1">
                        <u-input placeholder="请输入姓名" v-model="name" ></u-input>
                    </u-form-item>
                </u-form>
                <div class="submit" @click="getList">保存</div>
            </div>
        </u-popup>
      <u-popup v-model="show3" mode="bottom"  @close="close"  border-radius="14" closeable>
        <div class="popup-content" style="padding: 50px 10px 100px 10px">
          <u-form  labelWidth="120rpx">
            <u-form-item label="手机号" border ref="item1">
              <u-input placeholder="请输入手机号" v-model="zhuandanphone" style="background-color: rgba(0,0,0,0.1)"></u-input>
            </u-form-item>
            <u-form-item >
              <div class="button" style="width: 100%" @click="zhuandan">提交</div>
            </u-form-item>
          </u-form>
        </div>
      </u-popup>

        <u-calendar v-model="show2" mode="date" @change="changeDate"></u-calendar>
    </div>
</template>

<script>
import footerPage from "@/components/footer-page/index.vue";
import page from '@/mixins/page'
const tabMap = {
    6: 0,
    0: 1,
    1: 2,
    2: 3,
}
export default {
    components: {
        footerPage,
    },
    mixins: [page],
    data() {
        return {
            formData: {
            
            },
            tabsList: [
                { name: '全部', value: '1' },
                { name: '已完成', value: '2' },
                { name: '未付款', value: '3' },
                { name: '未收款', value: '4' },
                { name: '拆分成功', value: '5' },
                { name: '提货订单', value: '6' },
            ],
            searchValue: '',
            orderList: [
            ],
            tabValue: 0,
            chaifenNum: 0,
            show: false,
          show2: false,
            type: '1',
            name: '',
            addtime: '',
            tabsList2: [
                { name: '交易总额', value: '0' },
                { name: '预约人数', value: '0' },
                { name: '原始总额', value: '0' },
                { name: '差额', value: '0' },
            ],
          currentzhuandanItem: {},
          show3: false,
          zhuandanphone: ''
        }
    },
    computed: {
        orderListShow() {
            return this.orderList
        }
    },
    onShow() {
        this.getList()
    },
    onPullDownRefresh() {
        this.page = 1
        this.getList()
    },
    methods: {
      openzhuandan(item) {
        this.currentzhuandanItem = item || {}
        this.zhuandanphone = ''
        this.show3 = true
      },
      zhuandan() {
        // 校验手机号
        if (!this.zhuandanphone) return this.$common.errorToShow('请输入手机号')
        if (!this.$common.isPhoneNumber(this.zhuandanphone)) return this.$common.errorToShow('手机号格式不正确')

        this.$api.zhuandan({
          order_id: this.currentzhuandanItem.id,
          phone: this.zhuandanphone
        }).then(res => {
          if (res.code === 1) {
            this.show3 = ''
            this.pageNo = 1
            this.getList()
          } else {
            this.$common.errorToShow(res.reason)
          }
        })

      },
        changeDate(e) {
            this.addtime = e.result
        },
        changeTab(e) {
            this.type = e.value
            this.pageNo = 1
        },
        getList() {
            this.show =false
            this.$api.orderList2({
                page: this.page,
                pagesize: this.pagesize,
                type: this.type,
                name: this.name,
                addtime: this.addtime
            }).then(res => {
                console.log(res)
                this.orderList = res.result
                this.pageTotal = res.result.pageTotal
                this.pageSize = res.result.pageSize
                this.tabsList2 = [
                    { name: '今日交易总额', value: res.total_zong },
                    { name: '预约人数', value:res.total_ren  },
                    { name: '原始总额', value:res.total_cha  },
                    { name: '差额', value:res.total_cha_zong },
                ]
                uni.stopPullDownRefresh()
            })
        },
        // 付款
        confirm_pay(item) {
            this.$common.modelShow('提示', '确认付款？',() => {
                this.$api.pay({
                    order_sn: item.order_sn
                }).then(res => {
                    if (res.code == 1) {
                        this.pageNo = 1
                        this.getList()
                        setTimeout(() => {
                            uni.showToast({
                                icon: 'none',
                                title: res.reason
                            })
                        })
                    }
                })
            })
        },
        // 收款
        confirm_get(item) {
            this.$common.modelShow('提示', '确认收款？',() => {
                this.$api.pay2({
                    order_sn: item.order_sn
                }).then(res => {
                    if (res.code == 1) {
                        this.pageNo = 1
                        this.getList()
                        setTimeout(() => {
                            uni.showToast({
                                icon: 'none',
                                title: res.reason
                            })
                        })
                    }
                })
            })
        },
        // 卖
        sell(item) {
            this.$common.modelShow('提示', '确认委托代卖？',() => {
                this.$api.sell({
                    order_sn: item.order_sn
                }).then(res => {
                    if (res.code == 1) {
                        this.pageNo = 1
                        this.getList()
                        setTimeout(() => {
                            uni.showToast({
                                icon: 'none',
                                title: res.reason
                            })
                        })
                    }
                })
            })
        },
        chaifen(item) {
            uni.navigateTo({
                url: '/pages/order-list/chaifen?orderId=' + item.id
            })
        },
        confirm_chaifen() {
            if (!this.chaifenNum) return this.$common.errorToShow('拆分数量不能为空')
            this.$api.chaifen({
                product_sn: this.order.order_sn,
                splitnum: this.chaifenNum,
            }).then(res => {
                if (res.code == 1) {
                    this.pageNo = 1
                    this.getList()
                    setTimeout(() => {
                        uni.showToast({
                            icon: 'none',
                            title: res.reason
                        })
                    })
                    this.show = false
                }
            })
        },
        tihuo(item) {
            this.$common.modelShow('提示', '确认提货？',() => {
                this.$api.tihuo({
                    order_sn: item.order_sn
                }).then(res => {
                    if (res.code == 1) {
                        this.pageNo = 1
                        this.getList()
                        setTimeout(() => {
                            uni.showToast({
                                icon: 'none',
                                title: res.reason
                            })
                        })
                    }
                })
            })
        },
    }
}
</script>

<style lang="scss">
.tabs2 {
    width: 100%;
    background-color: #fff;
    display: flex;
    align-items: center;
    font-size: 32rpx;
    color: #ff443b;
    font-weight: 500;
    .tab2-item {
        flex: 1;
        text-align: center;
    }
}
.popup-content {
    padding: 30rpx;
    .date-box {
        width: 100%;
        border-radius: 4px;
        border: 1px solid #dcdfe6;
        height: 72rpx;
        line-height: 72rpx;
        padding: 0 30rpx;
    }
    .tab-btn-list {
        display: flex;
        flex-wrap: wrap;
        .tab-btn {
            border-radius: 32rpx;
            padding:10rpx 20rpx;
            height: 36rpx;
            line-height: 36rpx;
            border: 1px solid #ff443b;
            margin-right: 10rpx;
            margin-bottom: 10rpx;
        }
        .tab-btn.active {
            background-color: #ff443b;
            color: #ffffff;
        }
    }
}
.button {
  background-color: rgb(255, 68, 59);
  color: #fff;
  text-align: center;
  line-height: 60rpx;
  border-radius: 4px;
  margin-left: 10rpx;
  font-size: 24rpx;
  padding: 0 20rpx;
}
.order-page {
    height: calc(100vh - 30px);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    .input-box {
        background-color: #fff;
        padding: 18px 10px 8px 10px;
    }
    .tabs {
        width: 100%;
        background-color: #fff;
    }
    .filter-text {
        padding: 0 30rpx;
        text-align: right;
        color: #ff443b;
        height: 50px;
        line-height: 50px;
    }
    .order-list {
        flex-grow: 1;
        overflow: auto;
        padding: 30rpx;
        padding-top: 0;
        .order-item {
            margin-bottom: 20rpx;
            border-radius: 4px;
            background-color: #fff;
            padding: 30rpx;
            .order-header {
                .order-num {
                    font-size: 32rpx;
                    margin-bottom: 10rpx;
                }
                .order-status {
                    font-size: 24rpx;
                    .text {
                        color: #666;
                        font-weight: bold;
                    }
                }
            }
            .order-content {
                .order-name {
                    font-size: 32rpx;
                    margin-bottom: 10rpx;
                }
                .order-price {
                    font-size: 24rpx;
                    color: #999;
                }
                
                .order-price1 {
                    color: #f44336;
                }
                .order-price2 {
                    font-size: 24rpx;
                    color: #999;
                }
                
            }
            .order-date {
                flex-shrink: 0;
                font-size: 28rpx;
                color: #999;
            }
            .button-list {
                flex-grow: 1;
                margin-top: 10rpx;
                .button {
                    background-color: rgb(255, 68, 59);
                    color: #fff;
                    text-align: center;
                    line-height: 60rpx;
                    border-radius: 4px;
                    margin-left: 10rpx;
                    font-size: 24rpx;
                    padding: 0 20rpx;
                }
            }
        }
    }
    
    .box_popup {
        width: 662upx;
        text-align: center;
        
        & view:nth-child(1) {
            margin-top: 32upx;
            color: #333;
            font-size: 32upx;
            font-family: PingFang SC;
            font-weight: 500;
        }
        
        & view:nth-child(2) {
            margin-top: 38upx;
            font-size: 28upx;
            font-family: PingFang SC;
            font-weight: 500;
            color: #fea845;
        }
        
        .btn {
            display: flex;
            
            
            view {
                width: 50%;
                border-top: 2upx solid #e6e6e6;
                opacity: 1;
                text-align: center;
                line-height: 100upx;
            }
            
            .cancel {
                border-right: 2upx solid #e6e6e6;
                color: #999999;
                font-size: 36upx;
                font-family: PingFang SC;
                font-weight: 500;
            }
            
            .ok {
                color: #007aff;
                margin-top: 32upx;
                font-size: 36upx;
                font-family: PingFang SC;
                font-weight: 500;
            }
        }
    }
    
    .box_popup1 {
        & view:nth-child(2) {
            width: 424upx;
            font-size: 28upx;
            font-family: PingFang SC;
            font-weight: 500;
            color: #fea845;
            margin: 38upx auto 0;
        }
        
        input {
            width: 424upx;
            border: 2upx solid #e6e6e6;
            margin: 0 auto;
            height: 64upx;
            margin-top: 38upx;
        }
    }
}
</style>
